<template>
	<view class="payment">
		<text style="font-size: 30px; color: firebrick" @click="show=true">点击选择收货地址</text>
		<u-popup :show="show" mode="center">
			<view class="p1" v-for="item in list" @click="getdetail(item.id)">
				<u-tag :text="item.label"></u-tag>
				<text>姓名：{{item.name}}</text>
				<text>电话：{{item.phone}}</text>
				<text>地址：{{item.addressDetail}}</text>
			</view>
		</u-popup>
		<view class="p2" v-show="show2">
			<text>标签：{{detail.label}}</text>
			<text>姓名：{{detail.name}}</text>
			<text>电话：{{detail.phone}}</text>
			<text>地址：{{detail.addressDetail}}</text>
		</view>
		<view class="p3" v-for="item in food" >
			<image :src="'http://124.93.196.45:10001'+item.imgUrl"></image>
			<view class="p4">
				<text>{{item.name}}</text>
				<text>数量：{{item.count}}</text>
				<text>单价：{{item.price}}</text>
			</view>
			<view class="s1">
				<view class="s2" style="margin-top: 20px; margin-left: 20px;">
					<text style="font-size: 25px; color: red;">{{sum}}￥</text>
				</view>
				<u-button type="error" text="提交订单" style="width: 80px; 
				height: 30px; margin-top: 20px; margin-right: 20px;" @click="tijiao(item)"></u-button>
			</view>
		</view>
		<u-popup :show="key">
			<view class="p5">
				<text style="font-size: 27px;">请选择支付方式</text>
				<u-radio-group>
					<u-radio v-for="item in pay" :label="item.paymentType" :label-size="20" :name="item.paymentType"
					style="margin-left: 20px; margin-top: 20px;" @change="clickpay" ></u-radio>
				</u-radio-group>
				<view class="p6" style="margin-top: 40px; text-align: center; margin-bottom: 40px;">
					<text style="font-size: 24px;">{{sum}}￥</text>
				</view>
				<u-button  color="#00ca5e" text="确认支付" style="width: 100px; margin-bottom: 30px;" @click="payment"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				food:[],
				total:0,
				sum:0,
				list:[],
				show:false,
				detail:{},
				show2:false,
				orderItemList:[],
				order:'',
				sellerId:'',
				pay:[
					{
						paymentType:'微信支付',
						disable:false
					},
					{
						paymentType:'支付宝',
						disable:false
					},
					{
						paymentType:'电子支付',
						disable:false
					}
				],
				paymentType:'',
				key:false
			}
		},
		onLoad(options) {
			this.food=JSON.parse(options.data)
			console.log(this.food)
			this.total=options.total
			this.sum=options.sum
			this.getlist()
		},
		methods: {
			getlist(){
				this.api.get('/prod-api/api/takeout/address/list').then(res=>{
					this.list=res.data.data
				})
			},
			clickpay(e){
				this.paymentType=e
				console.log(this.paymentType)
			},
			payment(){
				if(this.paymentType===''){
					uni.showToast({
						title:'请选择方式',
						icon:'error'
					})
					return
				}
				const data={
					orderNo:this.order,
					paymentType:this.paymentType
				}
				this.api.get('/prod-api/api/takeout/pay','POST',data).then(res=>{
					if(res.data.code===200){
						setTimeout(function(){
							uni.showToast({
								title:'支付成功'
							})
						},700)
						uni.redirectTo({
							url:'/pages/other/takaway/indent/indent'
						})
					}else{
						console.log(res.data)
						setTimeout(function(){
							uni.showToast({
								title:'支付失败',
								icon:'error'
							})
						},700)
					}
					this.key=false
				})
			},
			getdetail(id){
				this.api.get('/prod-api/api/takeout/address/'+id).then(res=>{
					this.detail=res.data.data
				})
				this.show2=true
				this.show=false
				
			},
			tijiao(item){
				if(!this.show2){
					uni.showToast({
						title:'地址为空',
						icon:'error'
					})
					return
				}
				for(let i=0;i<this.food.length;i++){
					this.orderItemList.push({
						productId:this.food[i].id,
						quantity:this.food[i].count
					})
				}
				const data={
					addressDetail:this.detail.addressDetail,
					label:this.detail.label,
					name:this.detail.name,
					phone:this.detail.phone,
					amount:this.sum,
					orderItemList:this.orderItemList,
					sellerId:this.food[0].sellerId
				}
				this.api.get('/prod-api/api/takeout/order/create','POST',data).then(res=>{
					if(res.data.code===200){
						setTimeout(function(){
							uni.showToast({
								title:'订单提交成功'
							})
						},700)
						this.key=true
						this.order=res.data.orderNo
					}else{
						console.log(res.data)
						setTimeout(function(){
							uni.showToast({
								title:'请求失败',
								icon:'error'
							})
						},700)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.p1{
	width: 250px;
	display: flex;
	// flex-wrap: wrap;
	flex-direction: column;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 2px solid mediumpurple;
	line-height: 30px;
	border-radius: 10px;
	font-size: 18px;
}
.p2{
	display: flex;
	flex-direction: column;
	line-height: 28px;
}
.p3{
	border-top: 2px solid mediumpurple;
	margin-top: 20px;
	display: flex;
	image{
		width: 150px;
		height: 100px;
	}
	.p4{
		display: flex;
		flex-direction: column;
		line-height: 30px;
	}
	
}
.s1{
	width: 100%;
	height: 70px;
	display: flex;
	background-color: #ccc;
	position: fixed;
	bottom: 0;
	left: 0; 
}
</style>
